<template>
  <div class="nt">
    <div class="ntImg"></div>
    <div>
      <el-row>
        <el-col :span="16" style="height: 400px">
          <div id="ntChart"></div>
        </el-col>
        <el-col :span="8">
          <div class="total">
            <div style="color: #02b7fa">总数</div>
            <div>
              <span style="font-size: 30px; margin-right: 20px">{{
                  total
                }}</span
              ><span class="yh_blue">个</span>
            </div>
          </div>
          <div class="fault">
            <div style="color: orange">故障数</div>
            <div>
              <span style="font-size: 30px; margin-right: 20px">{{
                  fault
                }}</span
              ><span class="yh_blue" style="color: orange;">个</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="chartList">
      <el-table :data="tableData" style="width: 100%; height: 63px">
        <el-table-column
          prop="equipment_type"
          label="类别"
        ></el-table-column>
        <el-table-column
          prop="fault"
          label="总数"
        ></el-table-column>
        <el-table-column prop="total" label="故障数"></el-table-column>
      </el-table>
      <vueSeamlessScroll :data="tableData" class="seamless-warp">
        <div
          v-for="(item, index) in tableData"
          :key="index"
          @click="liclick(item)"
        >
          <div class="ntEquipmentList">
            <el-row>
              <el-col :span="8"><div>{{ item.equipment_type }}</div></el-col>
              <el-col :span="8"><div>{{ item.total }}</div></el-col>
              <el-col :span="8"><div>{{ item.fault  }}</div></el-col>
            </el-row>
          </div>
        </div>
      </vueSeamlessScroll>
    </div>
  </div>
</template>
<script>
import {getNt} from "../../../../utils/api";
import vueSeamlessScroll from "vue-seamless-scroll";

export default {
  components: {
    vueSeamlessScroll,
  },
  data () {
    return {
      total: 0,
      fault: 0,
      tableData: [],
    };
  },
  mounted () {
    this.getXFData();
  },
  methods: {
    getXFData () {
      let that = this;
      getNt()
        .then((response) => {
          that.total = response.data.total;
          that.fault = response.data.alarmsNumber;
          that.tableData = response.data.data;
          that.initCharts();
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    initCharts () {
      const dom = document.getElementById("ntChart")
      let myntChart = this.$echarts.init(dom);
      let app = {};
      let option = null;
      option = {
        // backgroundColor: '#1b1b1b',
        backgroundColor: "rgba(0,0,0,0)",
        tooltip: {
          formatter: "{a} <br/>{c} {b}",
        },
        toolbox: {
          show: true,
          feature: {
            mark: {show: true},
            restore: {show: true},
            saveAsImage: {show: true},
          },
        },
        series: [
          {
            type: "gauge",
            axisLine: {
              lineStyle: {
                width: 30,
                // color: "rgba(255,255,255,0)",
                color: [
                  [
                    1,
                    new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 0.1,
                        color: "#ED1414",
                      },
                      {
                        offset: 0.6,
                        color: "#FFA200",
                      },
                      {
                        offset: 1,
                        color: "#D7D7D7",
                      },
                    ]),
                  ],
                ],
              },
            },
            pointer: {
              icon: "",
              itemStyle: {
                color: "auto",
              },
            },
            axisTick: {
              distance: 10,
              splitNumber: 1,
              length: 30,
              lineStyle: {
                color: "rgba(255,255,255,0)",
                width: 10,
              },
            },
            splitLine: {
              distance: 10,
              length: 30,
              lineStyle: {
                color: "#fff",
                width: 1,
              },
            },
            axisLabel: {
              color: "auto",
              distance: 15,
              fontSize: 15,
            },
            detail: {
              valueAnimation: true,
              formatter: "{value} %",
              //color: 'auto',
              backgroundColor: "rgba(30,144,255,0.8)",
              borderWidth: 1,
              borderColor: "#fff",
              shadowColor: "#fff", //默认透明
              shadowBlur: 5,
              offsetCenter: [0, "70%"], // x, y，单位px
              textStyle: {
                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: "bolder",
                color: "#fff",
              },
              // offsetCenter: [0, "70%"],
            },
            title: {
              //设置仪表盘中间显示文字样式
              offsetCenter: [0, "30%"],
              textStyle: {
                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: 400,
                fontSize: 48,
                fontStyle: "Source Han Sans SC",
                color: "white",
              },
            },
            data: [
              {
                value:
                  this.fault == 0 || this.total == 0
                    ? 0
                    : ((this.fault * 100) / this.total).toFixed(2),
                name: "故障率",
              },
            ],
          },
          {
            name: "外层辅助线",
            type: "gauge",
            z: 1,
            min: 0,
            max: 10,
            splitNumber: 5,
            startAngle: -45,
            endAngle: -495,
            radius: "83%",
            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                width: 4,
                color: [[1, "#00AEFF"]],
                shadowBlur: 10,
                opacity: 0.5,
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            splitLine: {
              // 分隔线
              show: false,
              length: 15,
            },
            detail: {
              show: false,
            },
            data: [],
            clockwise: false,
          },
        ],
      };
      if (option && typeof option === "object") {
        myntChart.setOption(option, true);
      }
    },
  },
};
</script>

<style scoped>
.nt {
  width: 100%;
  height: 40%;
}
.nt .ntImg {
  width: 688px;
  height: 66px;
  background: url("../../../../../static/images/equipment/ntSystem.png") no-repeat center;
  background-size: 100% 100%;
  margin-bottom: 10px;
  margin-left: -50px;
}
#ntChart {
  height: 400px;
  width: 700px;
}
.chartList {
  width: 100%;
  height: 50%;
  margin-top: -60px;
}
.total {
  padding-left: 40px;
  width: 210px;
  height: 70px;
  background: url("../../../../../static/images/equipment/总数.png") no-repeat center;
  background-size: 100% 100%;
  margin: 80px 0;
  font-size: 20px;
}
.fault {
  padding-left: 40px;
  width: 210px;
  height: 70px;
  background: url("../../../../../static/images/equipment/故障数.png") no-repeat center;
  background-size: 100% 100%;
  margin: 10px;
  font-size: 20px;
}
.seamless-warp {
  height: 320px;
  overflow: hidden;
}
.ntEquipmentList {
  text-align: center;
  font-size: 26px;
}
.ntEquipmentList .el-row {
  padding: 15px 0;
  border-bottom: 1px solid #ccc;
}
.ntEquipmentList .el-row:hover {
  background-color: rgba(0, 174, 255, 0.37);
}
</style>
